<template>
  <div>
    <p>共{{ totalChapters }}章节，{{ totalActivities }}个活动</p>

    <div v-for="section in sections" :key="section.id" class="section">
      <h3>{{ section.name }}</h3>
      <ul>
        <li v-for="course in section.courses" :key="course.courseId">
          <div class="file-info">
            <span>{{ course.courseName }}</span>
            <span v-if="course.taskStatus === 1">已完成</span>
          </div>
          <button @click="study(course.courseId)">学习回顾</button>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  data() {
    return {
      sections: [],
      totalChapters: 0,
      totalActivities: 0,
    };
  },
  methods: {
    // fetchCourses() {
    //   axios.get('/api/directory')
    //       .then(response => {
    //         const data = response.data;
    //         this.totalActivities = data.length;
    //         this.sections = this.processSections(data);
    //       });
    // },
    processSections(data) {
      const sections = {};
      data.forEach(course => {
        course.courseFirstSection = undefined;
        if (!sections[course.courseFirstSection]) {
          sections[course.courseFirstSection] = {
            name: course.courseFirstSection,
            courses: [],
          };
        }
        sections[course.courseFirstSection].courses.push(course);
      });
      this.totalChapters = Object.keys(sections).length;
      return Object.values(sections);
    },
    study(courseId) {
      alert(`开始学习课程ID：${courseId}`);
    },
  },
  created() {
    this.fetchCourses();
  },
};
</script>

<style>
.section {
  margin: 20px 0;
}
.file-info {
  display: flex;
  justify-content: space-between;
}
</style>


